<template>
  <div class="demo-input">
    <pl-input />
    <h4>状态</h4>
    <pl-input
      v-for="item in ['primary', 'success', 'warn', 'error', 'info']"
      :key="item"
      :status="item"
      style="margin-right: 10px"
    />
    <h4>类型提示</h4>
    <pl-input ref="myInput" />
    <button @click="outerClear">outer clear</button>
    <button @click="outerFocus">outer focus</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import { Input } from "../../../src";

export default {
  name: "demo-input",
  setup() {
    const inputRef = Input.use.ref("myInput");
    return {
      outerClear: () => {
        inputRef.value?.methods.clear();
      },
      outerFocus: () => {
        inputRef.value?.methods.focus();
      },
    };
  },
};
</script>

<style scoped>
</style>